<template>
	<Layout class="p-5 bg-white">	
		<Form class="p-5" :label-width="150">
		<Row>
		<Col span="8">
			<FormItem class="w-100" label="会员券名称">
				<Select  v-model="voucherType.voucherTypeId" clearable placeholder="请选择会员券名称" @on-change="getNA()" >
					<Option v-for="voucher in voucherName" :value="voucher.voucherTypeId" >{{ voucher.name }}</Option>
				</Select>
			</FormItem>
			<FormItem class="w-100" label="有效时长/天">
				<!-- <label>
					<span v-if="this.voucher.voucherName.length === 0">0</span>
					<span v-else>{{voucherType.timeLongs/60/24}}</span>
				</label> -->
				<label>{{voucherType.timeLongs/60/24}}</label>
			</FormItem>
			<!-- <FormItem class="w-100" label="会员券状态">
				<Select  v-model="voucherType.statu" placeholder="请选择会员券状态" zz clearable>
					<Option v-for="item in voucherStatu" :value="item.value" >{{ item.label }}</Option>
				</Select>
			</FormItem> -->
			<FormItem class="w-100" label="新增数量">
				<!-- <Input v-model="voucherType.count" placeholder="请输入会员券数量" style="width: 170px;"/>
				<InputNumber v-model="voucherType.count" placeholder="请输入会员券数量" style="width: 170px;"/> -->
				<Input @keyup.native="changeNumber" v-model="voucherType.count" placeholder="请输入会员券数量" /></Input>
				<!-- <Input v-model="voucherType.count" placeholder="请输入会员券数量" :onkeyup="voucherType.count = voucherType.count.replace(/\s+/g,'')"></Input> -->
			</FormItem>
			<FormItem class="text-right"> 
				<Button @click="submit" type="primary">提交</Button>
				<Button @click="cancel" class="ml-2">取消</Button>
			</FormItem>
		</Col>
		</Row>	
		</Form>
	</Layout>
</template>

<script>
	export default {
		data() {
			return {
				voucherType: {
					voucherTypeId:"",
					timeLongs: "",
					statu: "",
					count: "",
				},
				voucherName: [],
				// voucherStatu: [
				// 	{
				// 		value: '1',
				// 		label: '可用'
				// 	},
				// 	{
				// 		value: '0',
				// 		label: '禁用'
				// 	},
				// ],
			}
		},
		methods: {
			changeNumber() {
				let str = '' + this.voucherType.count;      
				if (str.indexOf('.') != -1) {        
					let arr = str.split('');
			        arr.splice(arr.length - 1);        
					let str2 = arr.join('');        
					this.voucherType.count = +str2;
			      }
			    },
			getAllVoucherType: function() {
				this.http.get({
					url: "/client/voucher-type/all",
					param: {
						voucherTypeId:this.$data.voucherType.voucherTypeId
					}
				}).then(data => {
					this.$data.voucherName = data;
				
				});
			},
			getNA:function(){
				for(let index=0; index < this.$data.voucherName.length ; index++){
						if(this.$data.voucherName[index].voucherTypeId == this.$data.voucherType.voucherTypeId){
							this.$data.voucherType.timeLongs = this.$data.voucherName[index].timeLongs;
						}
				}
			},
			submit: function() {
				if(this.$data.voucherType.voucherTypeId == undefined 
				|| this.$data.voucherType.voucherTypeId == ""
				|| this.$data.voucherType.voucherTypeId == null 
				){
					this.message.error("请选择会员券类型名称");
				}else if(this.voucherType.count != null && this.voucherType.count != "" && this.voucherType.count > 0){
						this.http.post({
							url: "/client/voucher-record/info",
							param:{
								voucherTypeId:this.$data.voucherType.voucherTypeId,
								count:this.$data.voucherType.count,
								statu : this.$data.voucherType.statu,
							}
						}).then(data => {
							this.message.info("新增成功");
							this.$tabs.close();
							console.log(1);
							// this.$tabs.open("/voucher")
							this.$router.go(-1);
						});
					}else{
						this.message.error("请输入正确的数量");
					}
				
			},
			cancel: function() {
				this.$tabs.close();
			}
		},
		created: function() {
			this.getAllVoucherType();
		},
	}
</script>

<style>
</style>
